// 旋转动画
@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

// 渐变动画
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// 渐变动画
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


// 缩放动画
@keyframes zoomIn {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }


  100% {
    transform: scale(0);
  }
}

// 缩放动画
@keyframes fadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeZoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

// 从底部滑入
@keyframes slideInUp {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

// 从底部滑出
@keyframes slideOutDown {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

// 从顶部滑入
@keyframes slideInDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

// 从顶部滑出
@keyframes slideOutUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

// 从右侧滑入
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

// 从右侧滑出

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}

// 从左侧滑入
@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

// 从左侧滑出
@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}